### Font Families

If you'd like to customize your values for font families, use the `theme.fonts` section of your theme.

```diffjs
  // theme.js
  export const theme = {
    fonts: {
+     display: 'Oswald, ...',
+     body: 'Open Sans, ...',
    },
  }
```

Fonts have to be specified exactly like you specify them in [CSS property `font-family`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family).

Learn more about customizing the default theme in the [theme customization documentation](@TODO-link).

If you don't want to customize it, a set of `fonts` is already defined in default theme:

```js
const defaultTheme = {
  // ...
  fonts: {
    mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`,
    serif: `ui-serif, Georgia, Cambria, "Times New Roman", Times, serif`,
    sans: `ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`,
  },
}
```
